<template>
  <!-- 跟进记录 -->
  <div v-if="drawer" class="body_all">
    <el-drawer
      title="新增跟进信息"
      :visible.sync="drawer"
      direction="rtl"
      custom-class="demo-drawer"
      :close-on-press-escape="false"
      :wrapperClosable="false"
    >
      <!-- <h3>
      <span class="block_view" @click="resetForm"
        ><i class="iconfont icon-fanhui1 renturn-icon"></i>新增跟进信息</span
      >
    </h3> -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm form"
      >
        <el-form-item label="跟进对象" prop="contacts_id">
          <el-select
            v-model="ruleForm.contacts_id"
            filterable
            placeholder="请选择跟进对象"
          >
            <el-option
              v-for="item in contactsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
          ><i
            id="addComphone"
            class="el-icon-plus operable"
            style="color: #0276fe; margin-left: 20px"
            @click="showCompone"
            >新增联系人</i
          >
        </el-form-item>
        <el-form-item label="跟进状态" prop="status">
          <el-select v-model="ruleForm.status" filterable placeholder="请选择跟进对象">
            <el-option
              v-for="item in followUpList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成时间" prop="follow_time">
          <el-date-picker
            v-model="ruleForm.follow_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="跟进内容" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入跟进内容，支持@提醒别的同事..."
            v-model="ruleForm.content"
            maxlength="1000"
            show-word-limit
          >
          </el-input>
        </el-form-item>

        <el-form-item label="点击上传" prop="phone">
          <el-upload
            class="upload-demo"
            action
            :http-request="FileSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="5"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept=".image,.jpg,.png,.mp3,.mp4,.office"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              支持上传jpg/png/mp3/mp4/office等文件，最多上传5个附件，总大小限制100M
            </div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item prop="post">
        <div class="sourceC">
          <div style="display: block">
            <span style="float: left">添加到提醒</span>
            <el-switch style="float: right" v-model="sourceR"> </el-switch>
          </div>
        </div>
      </el-form-item> -->
      </el-form>
      <div class="foot_btn">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </div>
      <addCustomerData
        ref="customerData"
        :start="1"
        @getobject="getContacts"
      ></addCustomerData>
    </el-drawer>
  </div>
</template>

<script>
import addCustomerData from "./addCustomerData.vue";
export default {
  components: {
    addCustomerData,
  },
  data() {
    return {
      drawer: false,
      loading: false,
      dialogEditer: false,
      phoneSelList: [
        {
          value: 0,
          label: "手机",
        },
      ],
      contactsList: [], // 联系人下拉数据
      followUpList: [], // 跟进状态下拉数据
      fileList: [],
      ruleForm: {
        id: "",
        contacts_id: "",
        status: "",
        follow_time: "",
        content: "",
        file: [],
      },
      rules: {
        contacts_id: [
          { required: true, message: "请输入联系人名称", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择跟进状态", trigger: "change" },
        ],
        follow_time: [
          { required: true, message: "请选择完成时间", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入跟进内容", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    drawer(newData, oldData) {
      if (newData) {
        this.getContacts();
        this.getFollowUp();
      }
    },
  },
  created() {},
  methods: {
    // 获取联系人列表
    getContacts() {
      this.$cmsapi.searchContacts().then(
        (res) => {
          if (res.code == 0) {
            this.contactsList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取跟进状态列表
    getFollowUp() {
      this.$cmsapi.followStatuslList().then(
        (res) => {
          if (res.code == 0) {
            this.followUpList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 跳转新增联系人
    showCompone() {
      this.$refs.customerData.drawer = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].path == file.path) {
              this.fileList.splice(i, 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              return;
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      return false;
    },
    // 文件上传
    FileSuccess(param) {
      let that = this;
      this.$cmsapi.FileUpload(param.file).then(
        (res) => {
          if (res.code == 0) {
            let ppapFile = {
              name: res.data.name,
              path: res.data.path,
              ext: res.data.ext,
            };
            that.fileList.push(ppapFile);
            console.log(that.fileList);
          } else {
            that.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 取消&返回上一页
    resetForm() {
      this.drawer = false;
      // this.$router.go(0);
    },
    // 提交
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.ruleForm.file = JSON.stringify(that.fileList);
          that.$cmsapi.followAdd(that.ruleForm).then(
            (res) => {
              if (res.code == 0) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                that.ruleForm = that.$options.data().ruleForm;
                this.drawer = false;
                this.$router.push({
                  path: "/sale/workRecord",
                  query: {
                    t: Date.now(),
                  },
                });
              } else {
                that.$message.error(res.msg);
              }
            },
            (err) => {
              that.$message.error(err);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.body_all {
  height: auto;
  overflow-y: hidden;
  padding: 10px 20px 30px 30px;
  background-color: #fff;
}
.block_view {
  cursor: pointer;
}
.block_view:hover {
  color: #0276fe;
}
.renturn-icon {
  font-size: 24px;
  margin-right: 8px;
}
.form {
  width: 60%;
}
.addressTips {
  color: #a4adc0;
}
.addressTips span {
  cursor: pointer;
  margin-left: 5px;
  color: #1066ec;
}
</style>